<template>
  <div id="xiang">
    <div class="pop" @click="hui">&lt;</div>
    <div class="box">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in list" :key="item.id">
          <img :src="item.pic" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="box1">
      <p v-html="list1.name"></p>
      <div class="aa">
        低价：{{ list1.minPrice }}<b>原价：{{ list1.originalPrice }}</b>
        <b class="cc">库存：{{ list1.stores }}</b>
      </div>
    </div>
    <div class="box2"></div>
    <div class="box3">
      <ul>
        <li @click="popp">商品介绍</li>
        <li @click="som">商品评价</li>
      </ul>
    </div>
    <div class="box4" v-html="list2.content" v-show="sum"></div>
    <div class="box5">
      <ul>
        <li></li>
      </ul>
    </div>
    <div class="box7">
      <ul>
        <li v-for="item in list5" :key="item.id">
          <div>
              <img src="../assets/imgs/7.png" alt="">
          </div>
          <div>
              <p><span>{{item.user.nick}}</span> <span>{{item.goods.goodReputationStr}}</span></p>
              <p>{{item.goods.goodReputationRemark}}</p>
              <p><span>{{item.goods.dateReputation}}</span><b> 规定规格：{{item.goods.property}}</b></p>
          </div>
        </li>
        
      </ul>
    </div>
    <div class="box6">
      <ul>
        <li @click="home">
          <van-icon name="service-o" class="tyu" />
        </li>
        <li @click="gou">
          <van-icon name="shopping-cart-o" class="tyt" />
        </li>
        <li @click="xing">
          <van-icon name="star" class="typ" />
        </li>
        <li @click="goumai">立即购买</li>
        <li @click="jiaru" >加入购物车</li>
      </ul>
    </div>

    <van-action-sheet v-model="show" title="标题" class="tyupp">
      <div class="content">
          <ul>
              <li>
                 <img :src="list4.pic" alt="">
              </li>
              <li>
                  <p>{{list1.name}} </p>
                  <span>￥ {{list1.minPrice}}</span>
              </li>
          </ul>
            <ul>
             <p>{{list6.name}}</p>
             <span v-for="item in list6.childsCurGoods" :key="item.id">
               {{item.name}}
             </span>
          </ul>
          <div class="box9">
              <p>购买数量</p>
              <p><span><van-stepper v-model="value" /></span></p>
          </div>
          <div class="box10" v-if="abc">
            立即购买
          </div>
           <div class="box10" v-else>
            加入购物车
          </div>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import { getgouwuxiangqing,getfenlei1321,getpingjia ,getgoumaijiekou} from "../utils/api";
import '../assets/imgs/7.png'

export default {
  name: "",
  data() {
    return {
       goodsId:this.$route.query.id,
      propertyChildIds:":,",
      list: [],
      list1: [],
      list2: [],
      sum: true,
      show:false,
      list4:[],
      list5:[],
      list6:[],
      value:1,
      abc:true,
    };
  },
  created() {
    getgouwuxiangqing(this.$route.query.id).then((res) => {
     console.log(res.data.data.properties);
      this.list = res.data.data.pics;
      this.list1 = res.data.data.basicInfo;
      this.list2 = res.data.data;
       this.list4 = res.data.data.pics[0];
       this.list6=res.data.data.properties[0]
     
     
    });
    
     let obj={
        goodsId:this.goodsId,
      
       
     }
    
     let start={
      goodsId:this.goodsId,
      propertyChildIds:this.propertyChildIds
     }
      
    getpingjia(obj).then(res=>{
     
      this.list5=res.data.data
    })

    getgoumaijiekou(start).then(res=>{
    
       
    })
  },
  methods: {
    //   点击购买
    goumai(){
        this.show=true
        this.abc=true
    },
    jiaru(){
        this.show=true
        this.abc=false
    },
    //   点击星星变亮
    xing() {},
    //   跳转到购物车页面
    gou() {
      this.$router.push("/gou");
    },

    //   跳转到home页面
    home() {
      this.$router.push("/home");
    },
    //   切换
    popp() {
      this.sum = true;
    },
    som() {
      this.sum = false;
      
 
    },
    hui() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang='scss'scoped>
.box7{
  width: 100%;
 margin-bottom: 50px;
  ul{
    width: 100%;
    list-style: none;
    
    li{
      width: 100%;
      height: 120px;
      // background-color: yellow;
      margin-top: 5px;
      display: flex;
      border-bottom: 1px solid #ccc;
      div:nth-child(1){
        width: 30%;
        height: 90%;
        line-height: 90%;
        img{
          width: 80%;
          height: 80%;
         
         margin-top: 10px;
        }
      }
       div:nth-child(2){
         
        width: 70%;
        height: 90%;
        p{
         margin-top: 10px;
         width: 100%;
          white-space: nowrap;
        overflow: hidden;

        text-overflow: ellipsis;
          font-size: 12px;
        }
        p:nth-child(3){
          margin-top: 10px;
          width: 100%;
          span{
            display: inline-block;
            width: 100px;
             font-size: 12px;
          }
         b{
           margin-left: 10px;
         }
        }
        span:nth-child(2){
          display: inline-block;
          height: 25px;
          width: 40px;
          background-color: red;
          font-size: 12px;
          text-align: center;
          line-height: 25px;
          color: white;
          border-radius: 5px;
         
        }
        span:nth-child(1){
          display: inline-block;
          height: 25px;
          width: 60px;
         
         font-size: 16px;
          text-align: center;
          line-height: 25px;
         
         
          
        }
      }
    }
  }
}
.tyupp{
  border-radius: none;
}
  .content {
    padding: 0px 0px 0px;
    .box10{
      width: 100%;
      height: 60px;
      background-color: #B7282E;
      text-align: center;
      line-height: 60px;
      font-size: 18px;
      color: white;
    }
    .box9{
      width: 100%;
      height: 60px;
      // background-color: red;
      display: flex;
      line-height: 60px;
      margin-top: 10px;
      p:nth-child(1){
        width: 70%;
      }
      p:nyh-child(2){
         width: 30%;
     
      }
    }
    ul:nth-child(1){
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100px;
        display: flex;
        border-bottom: 1px solid #cccc;
        margin-top: 20px;
        // background-color: red;
        li:nth-child(1){
            width: 30%;
            img{
                width: 90%;
                height: 90px;
            }
        }
        li:nth-child(2){
            width: 70%;
           
            line-height: 50px;
            p{
               font-size: 14px; 
               margin-left: 10px;
            }
            span{
                color: red;
            }
        }
    }
      ul:nth-child(2){
        margin: 0;
        padding: 0;
        width: 100%;
        height: 120px;
       
        border-bottom: 1px solid #cccc;
        margin-top: 20px;
        p{
          margin-left: 10px;
          margin-top: 10px;
          margin-bottom: 20px;
        }
        span{
          display: inline-block;
          width: 100px;
          height: 30px;
          border: 1px solid #cccc;
          border-radius: 5px;
          text-align: center;
          line-height: 30px;
          margin-left: 10px;
          font-size: 12px;
          margin-top: 5px;
        }
      }
  }
.box6 {
  width: 100%;
  height: 50px;
  background-color: white;
  position: fixed;
  bottom: 0px;
  z-index: 999;
  line-height: 50px;
  ul {
    width: 100%;
    display: flex;
    text-align: center;

    li:nth-child(1) {
      width: 20%;
      border-right: 1px solid #cccc;
      font-size: 24px;
      align-items: center;
      .tyu {
        margin-top: 15px;
      }
    }
    li:nth-child(2) {
      width: 20%;
      border-right: 1px solid #cccc;

      .tyt {
        font-size: 24px;
        margin-top: 15px;
      }
    }
    li:nth-child(3) {
      width: 20%;
      border-right: 1px solid #cccc;
      .typ {
        font-size: 24px;
        margin-top: 15px;
      }
      .typ:hover {
        color: #f7ba2a;
      }
    }
    li:nth-child(4) {
      width: 40%;
    }
    li:nth-child(5) {
      width: 40%;
      background-color: #b7282e;
      color: white;
    }
  }
}
.box5 {
  width: 100%;
  ul {
    width: 100%;
    li {
      width: 100%;
     
      img {
        width: 100%;
      }
    }
  }
}

.box4 {
  width: 100%;
  margin-top: 20px;
  /deep/ img {
    width: 100% !important;
    height: 100% !important;
  }
}
.box3 {
  width: 100%;
  ul {
    list-style: none;
    display: flex;
    li {
      width: 50%;
      line-height: 50px;
      text-align: center;
      font-size: 20px;
    }
    li:hover {
      border-bottom: 2px solid red;
    }
  }
}

.box2 {
  width: 100%;
  height: 10px;
  background-color: #ccc;
}
.box {
  width: 100%;
  height: 350px;
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    height: 350px;
    text-align: center;
    //   background-color: #39a9ed;
    img {
      width: 100%;
      height: 100%;
    }
  }
}

.box1 {
  width: 100%;
  height: 60px;
  background-color: white;
  p {
    font-size: 14px;
    margin-top: 20px;
    margin-left: 10px;
  }
  .aa {
    font-size: 14px;
    margin-top: 20px;
    margin-left: 10px;
    color: red;
    b {
      margin-left: 20px;
      color: #cccc;
    }
    .cc {
      margin-left: 100px;
      color: #cccc;
    }
  }
}

.pop {
  display: inline-block;
  position: fixed;
  top: 25px;
  left: 15px;
  z-index: 99999;
  font-size: 25px;
  width: 30px;
  height: 30px;
  text-align: center;
  border-radius: 50%;
  line-height: 30px;
  background-color: white;
}
</style>